import React, { Component } from 'react';
import './index.css'

class Index extends Component {
  state = {
    mouse: false
  }
  handleMouse = (flag) => {
    return () => {
      this.setState({
        mouse: flag
      })
    }
  }

  handleChange = (id) => {
    const { updateTodo } = this.props
    return (event) => {
      updateTodo(id, event.target.checked)
    }
  }
  

  handleDelete = (id) => {
    if (window.confirm('确定删除吗?')) {
      const { deleteTodo } = this.props
      deleteTodo(id)
    }
  }

  render() {
    const { id, name, done } = this.props
    const { mouse } = this.state
    return (
      <li onMouseLeave={this.handleMouse(false)} onMouseEnter={this.handleMouse(true)} style={{ backgroundColor: mouse ? '#f5f5f5' : ''}}>
        <label>
          <input type="checkbox" checked={done} onChange={this.handleChange(id)} /><span>{name}</span>
        </label>
        <button style={{ display: mouse ? 'block' : 'none'}} onClick={() => this.handleDelete(id)}>删除</button>
      </li>
    );
  }
}

export default Index;
